<template>
  <el-dialog
    title="自动打标签"
    :visible.sync="$attrs.visable"
    width="600px"
    :before-close="handleClose"
    append-to-body
  >
    <div class="warningbox br_4 c_text">
      <div>
        1、只勾选群名称时，群名称有变更时判断，满足群名称关键词触发打标签；
      </div>
      <div>
        2、只勾选群人数时，群人数有变更时判断，满足群人数设置触发打标签；
      </div>
      <div>
        3、两者都勾选时，两者任一有变更时都判断，且需同时满足两者触发打标签。
      </div>
    </div>
    <el-form :model="form" :rules="rules" ref="ruleForm" size="small" class="mt-10">
      <el-form-item class="mb-8">
        <el-checkbox v-model="form.checked"
          ><span class="c_text2">
            群名中包含关键词，打上当前选中的标签</span
          ></el-checkbox
        >
      </el-form-item>
      <el-form-item class="mb-8">
        <div class="">
          <el-input
            placeholder="输入关键词，按回车添加"
            size="small"
            v-model="keyword"
            maxlength="50"
            show-word-limit
            style="width: 500px"
            @keyup.enter.native="handleAdd"
          >
            <template slot="append">
              <i class="el-icon-plus f-16 c_primary" @click="handleAdd"></i>
            </template>
          </el-input>
          <span class="ml-8 f-14 pt-8">{{ form.tags.length }} / 100</span>
        </div>
        <div class="flex mt-8 flexwrap">
          <span
            v-for="(item, index) in form.tags"
            :key="index"
            class="mytag f-14"
            >{{ item }}
            <i
              class="el-icon-close commhover"
              @click="removeLable(index, 1)"
            ></i
          ></span>
        </div>
      </el-form-item>
      <el-form-item class="mb-8">
        <el-checkbox v-model="form.checked">
          <span class="c_text2"> 群成员人数达到
            <el-input v-model="form.number" style="width:88px"></el-input> 
            时，打当前选中的标签。
          </span>
            <!-- <span class="c_text2"> 群名中包含关键词，打上当前选中的标签</span> -->
        </el-checkbox>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="handleClose">取 消</el-button>
      <el-button size="small" type="primary" @click="handleClose"
        >确 定</el-button
      >
    </span>
  </el-dialog>
</template>
<script>
export default {
  data() {
    return {
      loading: false,
      form: {
        name: "",
        tags: [],
      },
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
      },
      keyword: "",
    };
  },
  props: {
    // ids: {
    //   type: Array,
    //   default: [],
    // },
  },
  created() {
    // console.log("type:", this.type);
  },
  methods: {
    handleClose() {
      this.$emit("update:visable", false);
    },

    handleQuery() {},

    handleAdd() {
      //精准关键词
      if (this.keyword) {
        if (this.form.tags.includes(this.keyword)) {
          this.$message.warning("标签重复");
          return;
        }
        this.form.tags.push(this.keyword);
        this.keyword = "";
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.warningbox {
  background-color: #fffbe6;
  border: 1px solid #ffe58f;
  padding: 8px 15px;
  line-height: 1.5715;
}
.el-form{
    ::v-deep .el-input-group__append{
        padding: 0 12px;
    }
}
</style>
